<template>
	<view class="reset-password">
		<g-navbar title="忘记密码" />
		<view class="top-title-wrapper">
			<view class="title">修改密码</view>
			<view class="tip-text">
				输入手机号码和验证码以修改密码
			</view>
		</view>
		<view class="reset-password-form">
			<uni-forms class="form-main" :modelValue="formData" :rules="rules" ref="resetForm">
				<uni-forms-item class="form-item" label="手机号" name="phone">
					<g-input type="phone" v-model="formData.phone" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="密码" name="password">
					<g-input type="password" v-model="formData.password" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="确认密码" name="confirm_password">
					<g-input type="password" v-model="formData.confirm_password" />
				</uni-forms-item>
				<uni-forms-item class="form-item" label="验证码" name="code">
					<g-input type="code" ref="codeInput" v-model="formData.code" @clickvcode="clickvcode"
						:disabled="!isVcodeDisable" id="restPassword" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="reset-confirm-btn-wrapper">
			<g-button btn_text='确认' :width="686" :height="104" :fontSize="32" @click="clickReset"></g-button>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		options: {
			styleIsolation: 'shared'
		},
	}
</script>

<script lang="ts" setup>
	import {
		reactive,
		computed,
		ref,
		Ref
	} from 'vue';
	import {
		onReady
	} from '@dcloudio/uni-app';
	import REST_URL from '@/http/http.restUrl';
	import {
		mobile
	} from '@/utils/test';

	interface IResetPasswordformData {
		phone: string;
		code: string;
		confirm_password: string;
		password: string;
	}

	const resetForm: Ref < any > = ref(null);

	const codeInput: Ref < any > = ref(null);

	const formData: IResetPasswordformData = reactive({
		phone: '',
		code: '',
		confirm_password: '',
		password: '',
	});
	const rules = {
		phone: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号码',
				},
				{
					validateFunction: (rule, value, data, callback) => {
						if (mobile(value)) {
							return true
						} else {
							callback('请输入正确的手机号')
						}
					}
				},
			]
		},
		password: {
			rules: [{
					required: true,
					errorMessage: '请输入密码'
				},
				{
					minLength: 6,
					errorMessage: '密码需要至少6位字符'
				}
			]
		},
		confirm_password: {
			rules: [{
					required: true,
					errorMessage: '请输入确认密码'
				},
				{
					validateFunction: (rule, value, data, callback) => {
						if (data.password !== value) {
							callback('确认密码与密码不一致')
						}
						return true
					}
				}
			]
		},
		code: {
			rules: [{
					required: true,
					errorMessage: '请输入验证码'
				},
				{
					minLength: 6,
					errorMessage: '请输入6位验证码'
				}
			]
		},
	};

	onReady(() => {
		resetForm.value.setRules(rules);
	})

	const isVcodeDisable = computed(() => {
		return formData.phone && formData.phone.length == 11;
	})


	const clickReset = () => {
		resetForm.value.validate().then(async (form: IResetPasswordformData) => {
			console.log('表单验证成功', form)
			const result = await uni.http.POST(REST_URL.resetPssword, form);
			uni.router.route({
				url: '/pages_login/login_entry/loginEntry',
				success: () => {
					uni.prompt.$showToast('修改密码成功');
				}
			})
			console.log('result=======>', result);
		}).catch((form: IResetPasswordformData) => {
			console.log('表单验证失败', form)
		})
	}


	const clickvcode = async ():Promise < void > => {
		await uni.http.POST(REST_URL.sendCode, {
			phone: formData.phone
		})
		codeInput.value.changeStatus();
		uni.prompt.$showToast('已发送验证码');
	}
</script>

<style scoped lang="scss">
	@import "./resetPassword.scss";
</style>
